/**
 * 该文件就是写路由配置的地方
 */
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import { getToken } from '@/utils/token'

// 导入页面 @代表 src 【难倒不难，仔细点】
/**
import Login from '@/views/login/Login.vue'
import Layout from '@/views/layout/Index.vue'
import Chart from '@/views/layout/chart/Index.vue'
import User from '@/views/layout/user/Index.vue'
import Enterprise from '@/views/layout/enterprise/Index.vue'
import Question from '@/views/layout/question/Index.vue'
import Subject from '@/views/layout/subject/Index.vue'
import Welcome from '@/views/layout/welcome/Index.vue'
import NotFound from '@/views/404/NotFound'
// import Parent from '../../test/default/Parent'
 */
const Login = () => import('@/views/login/Login.vue')
const Layout = () => import('@/views/layout/Index.vue')
const Chart = () => import('@/views/layout/chart/Index.vue')
const User = () => import('@/views/layout/user/Index.vue')
const Enterprise = () => import('@/views/layout/enterprise/Index.vue')
const Question = () => import('@/views/layout/question/Index.vue')
const Subject = () => import('@/views/layout/subject/Index.vue')
const Welcome = () => import('@/views/layout/welcome/Index.vue')
const NotFound = () => import('@/views/404/NotFound')

const router = new VueRouter({
  // routes这个属性，就叫这个，不要乱写
  routes: [
    {
      path: '/login',
      // component 单词不要写错
      component: Login,
      meta: {
        title: '登录'
      }
    },
    {
      path: '/layout',
      // component 单词不要写错
      component: Layout,
      redirect: '/layout/welcome',
      meta: {
        roles: ['超级管理员', '管理员', '老师', '学生'] // 代表哪些角色可以访问
      },
      children: [
        // 要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
        {
          path: 'welcome',
          component: Welcome,
          meta: {
            title: '欢迎页',
            fullPath: '/layout/welcome',
            icon: 'el-icon-sunny',
            roles: ['超级管理员', '管理员', '老师', '学生'] // 代表哪些角色可以访问
          }
        },
        {
          path: 'chart',
          component: Chart,
          meta: {
            title: '数据预览',
            fullPath: '/layout/chart',
            icon: 'el-icon-pie-chart',
            roles: ['超级管理员', '管理员', '老师'] // 代表哪些角色可以访问
          }
        },
        {
          path: 'user',
          component: User,
          meta: {
            title: '用户列表',
            fullPath: '/layout/user',
            icon: 'el-icon-user',
            roles: ['超级管理员', '管理员', '老师'] // 代表哪些角色可以访问
          }
        },
        {
          path: 'enterprise',
          component: Enterprise,
          meta: {
            title: '企业列表',
            fullPath: '/layout/enterprise',
            icon: 'el-icon-office-building',
            roles: ['超级管理员', '管理员', '老师'] // 代表哪些角色可以访问
          }
        },
        {
          path: 'question',
          component: Question,
          meta: {
            title: '题库列表',
            fullPath: '/layout/question',
            icon: 'el-icon-edit-outline',
            roles: ['超级管理员', '管理员', '老师', '学生'] // 代表哪些角色可以访问
          }
        },
        {
          path: 'subject',
          component: Subject,
          meta: {
            title: '学科列表',
            fullPath: '/layout/subject',
            icon: 'el-icon-notebook-2',
            roles: ['超级管理员', '管理员', '老师'] // 代表哪些角色可以访问
          }
        }
        // { path: '', redirect: 'user' }
      ]
    },
    // 路由重定向
    {
      path: '/',
      redirect: '/login'
    },
    {
      path: '*',
      component: NotFound
    }
    // {
    //   path: '/test/default',
    //   component: Parent
    // }
  ]
})

/**
 * 只要是路由跳转，无论是通过编程式导航或是手动输入地址跳转，都会进入该回调函数中
 * to：跳转到哪个页面中去
 * from：跳转之前的路径
 * next：能不能跳转，以及能跳转到哪里去，如果不调用next，就会卡在这里
 */
router.beforeEach((to, from, next) => {
  /**
   * 如果是登录页面，则直接放行
   * 如果不是登录页面，需要先进性判断，如果有权限则放行，没有权限则跳回到登录页面
   *
   * 路径判断仔细点，你可以打印之后copy
   */
  if (to.path === '/login') {
    next()
  } else {
    const token = getToken()
    if (token) {
      next()
    } else {
      next('/login')
    }
  }
})

// 后置守卫
router.afterEach(to => {
  // ...
  document.title = to.meta.title || '黑马面面'
})

// ES6中的默认导出
export default router
